<template>
  <n-layout-sider
    ref="sider"
    bordered
    :style="{ height: `${innerHeight - 40}px` }"
    content-style="padding: 0px;background:2c3e50;"
  >
    <!-- <div class="divider" /> -->
    <div v-for="(item, index) in linkList" :key="index">
      <n-h2
        :style="{
          padding: '5px',
          margin: '2px',
          background: current.id == item.id ? 'green' : 'transparent',
        }"
        @dblclick="onDoubleClick(item)"
      >
        <n-thing
          style="padding: 10px"
          :title="item.name"
          :description="item.host + ':' + item.port"
        />
      </n-h2>
      <div class="divider" />
    </div>

    <!-- <n-button style="margin: 5px; float: right" @click="onResetClick"
      >重置</n-button
    >
    <n-button style="margin: 5px; float: right" @click="onRefreshClick"
      >刷新</n-button
    >
    <n-button style="margin: 5px; float: right" @click="onAddClick"
      >添加</n-button
    > -->

    <div class="divider" />
  </n-layout-sider>
</template>

<script>
import Constants from "../contants";
import IPC from "../background/ipc";
import useLinkRepositories from "../composables/useLinkRepositories";
import useWindowSize from "../composables/useWindowSize";
import { onMounted, ref, computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "VGSider",
  props: {},
  setup() {
    const store = useStore();

    const like = ref("");

    //const selected = ref(-1);

    const { linkList, getLinkList, addLink, resetLink } =
      useLinkRepositories(like);

    const { innerHeight } = useWindowSize();

    const current = computed(() => store.state.current);

    const reset = (linkInfo) => store.commit("current/reset", linkInfo);

    const onDoubleClick = (info) => {
      reset(info);
    };

    // watch(selected, () => {
    //   if (selected.value < 0) {
    //     return;
    //   }
    //   let linkInfo = linkList.value[selected.value];
    //   reset(linkInfo);
    // });

    onMounted(() => getLinkList());

    onMounted(() => {
      IPC.revice(Constants.REFRESH_LINK_ENENT, (params) => {
        //console.log("---------IPC.revice----------");
        console.log(params);
        getLinkList();
      });
    });

    return {
      like,
      current,
      innerHeight,
      //selected,
      linkList,
      getLinkList,
      addLink,
      resetLink,
      onDoubleClick,
    };
  },
  // methods: {
  //   onDoubleClick(index) {
  //     console.log(index);
  //     this.selected = index;
  //   },
  //   onAddClick() {
  //     var testLinkInfo = {
  //       name: "五菱数据库",
  //       host: "rds-93-pub.get.vip",
  //       port: "3306",
  //       user: "admin",
  //       password: "M9FMnylz",
  //       database: "huaz_user_center",
  //     };
  //     this.addLink(testLinkInfo);
  //   },
  //   onRefreshClick() {
  //     this.getLinkList();
  //   },
  //   onResetClick() {
  //     this.resetLink();
  //   },
  // },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.divider {
  width: 100%;
  background: rgba(255, 255, 255, 0.09);
  height: 1px;
  margin-top: 2px;
  margin-bottom: 2px;
}
</style>
